// 创建路由对象，并默认导出


// 导入路由插件
import VueRouter from "vue-router"
import Vue from 'vue' 

// 使用插件 - 重要
Vue.use(VueRouter)

// 提前定义好五个组件，以备在路由中使用
import Hero from './views/Hero.vue'
import Zb from './views/Zb.vue'
import Jn from './views/Jn.vue'
import HeroAdd from './views/HeroAdd.vue'
import HeroEdit from './views/HeroEdit.vue'

// 创建路由实例 默认导出
// 定义路由规则
export default new VueRouter({
    // 当路由与router-link中的to 精确匹配时，给rotuer-link上添加一个类，名是active
    // active是bootstrap中内置的一个特殊的类名，有它，则会有高亮的效果
    linkExactActiveClass: 'active',
    routes: [
      // 主页重定向
      // 默认显示hero组件
      {path: '/', redirect:'/hero' },
      // component : 组件对象，其中就应该有data,template,methods....。
      {path: '/hero', component: Hero },
      {path: '/zb', component: Zb },
      {path: '/jn', component: Jn },
      {path: '/hero/add', component: HeroAdd },
      // 动态路由
      {path: '/hero/edit/:id', component: HeroEdit }
    ]
  })